<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Password Generator</title>
    <link rel="stylesheet" href="./style.css" type="text/css">
</head>
<body>
    <div class="container">
        <h1 class="title">Password Generator</h1>
        <p class="password">Your Password</p>
        <button class="btn" id="btn-generate">GENERATE!</button>
        <p class="desc-title">Preferences</p>
        <form class="form">
            <label for="password-length-number">Length</label>
            <input type="number" name="pln" id="password-length-number" class="number-input" min="1" max="50" value="8">

            <label for="lowercase">Lower Case Alphabets</label>
            <input type="checkbox" name="lc" id="lowercase" checked>

            <label for="lowercase">Upper Case Alphabets</label>
            <input type="checkbox" name="uc" id="uppercase">

            <label for="lowercase">Numbers</label>
            <input type="checkbox" name="num" id="numbers">

            <label for="lowercase">Symbols</label>
            <input type="checkbox" name="sym" id="symbols">
        </form>
    </div>
    <script src="./app.js" type="text/javascript"></script>
</body>
</html>